<template>
  <article-menu-header v-model="article.headline"
                       @draftHandler="draftHandler"
                       @releaseHandler="releaseHandler"
  />
  <markdown-editor v-model="article.content" />
  <article-writing-release v-model="article" ref="writingRelease"/>
</template>

<script>
import MarkdownEditor from '@/components/markdown-editor/MarkdownEditor'
import { ref } from 'vue'
import ArticleWritingRelease from '@/views/programming/article/form/article-writing-release'
import { ElMessage } from 'element-plus'
import { articleById, articleDraft } from '@/api/article'
import ArticleMenuHeader from '@/components/article-menu/header/article-menu-header'
export default {
  name: 'ArticleWriting',
  components: { ArticleMenuHeader, ArticleWritingRelease, MarkdownEditor },
  setup () {
    return {
      article: ref({
        id: '',
        headline: '',
        coverUrl: '',
        summarize: '',
        content: '',
        type: 'ORIGINAL',
        classifications: '',
        labels: ''
      })
    }
  },
  methods: {
    releaseHandler () {
      if (!this.article.headline) {
        ElMessage({
          type: 'warning',
          message: '请填写文章标题'
        })
      } else if (!this.article.content) {
        ElMessage({
          type: 'warning',
          message: '请填写文章内容'
        })
      } else {
        this.$refs.writingRelease.dialogVisible = true
      }
    },
    draftHandler () {
      articleDraft(this.article).then(value => {
        console.log(value)
      })
    },
    getArticleById (articleId) {
      articleById(articleId).then(val => {
        this.article = val.data
      })
    }
  },
  mounted () {
    console.log('router', this.$router)
    const query = this.$router.currentRoute.value.query
    if (query) {
      const articleId = query.articleId
      console.log(articleId)
      if (articleId) {
        this.getArticleById(articleId)
      }
    }
  }
}
</script>

<style scoped>

</style>
